<nz-modal [(nzVisible)]="isEditVisible" [nzTitle]="title" (nzOnCancel)="handleCancel()"
          (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading" [nzWidth]="800">

  <div style="display: flex">
    <div style="width: 400px;">
      <form nz-form [formGroup]="formModel">
        <div>
          <div class="left">
            <nz-form-item *ngIf="id == 0">
              <nz-form-label [nzSpan]="6" nzRequired nzFor="username">登录账号</nz-form-label>
              <nz-form-control [nzSm]="15" [nzXs]="24" nzHasFeedback nzValidatingTip="验证中..."
                               [nzErrorTip]="userNameErrorTpl">
                <input nz-input type="text" id="username" formControlName="username" readonly
                       onfocus="this.removeAttribute('readonly');"
                       placeholder="建议填写手机、邮件、拼音或汉字">
                <ng-template #userNameErrorTpl let-control>
                  <ng-container *ngIf="control.hasError('required')">
                    请输入登录账号!
                  </ng-container>
                  <ng-container *ngIf="control.hasError('correct')">
                    请输入正确的登录账号!
                  </ng-container>
                  <ng-container *ngIf="control.hasError('duplicated')">
                    登录账号已存在!
                  </ng-container>
                </ng-template>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item *ngIf="id == 0">
              <nz-form-label [nzSpan]="6" nzRequired>登录密码</nz-form-label>
              <nz-form-control [nzSpan]="15" nzHasFeedback [nzErrorTip]="passwordErrorTpl!">
                <input nz-input type="password" minlength="6" formControlName="password" placeholder="请输入登录密码"
                       (ngModelChange)="validateConfirmPassword()" readonly
                       onfocus="this.removeAttribute('readonly');"/>

                <ng-template #passwordErrorTpl let-control>
                  <ng-container *ngIf="control.hasError('minlength')">密码最小为6位数</ng-container>
                  <ng-container *ngIf="control.hasError('required')">请输入登录密码</ng-container>
                </ng-template>

              </nz-form-control>
            </nz-form-item>

            <nz-form-item *ngIf="id == 0">
              <nz-form-label [nzSpan]="6" nzRequired>确认密码</nz-form-label>
              <nz-form-control [nzSpan]="15" nzHasFeedback [nzErrorTip]="confirmPasswordErrorTpl">
                <input nz-input type="password" minlength="6" formControlName="confirm" placeholder="请输入确认密码"
                       readonly onfocus="this.removeAttribute('readonly');"/>
                <ng-template #confirmPasswordErrorTpl let-control>
                  <ng-container *ngIf="control.hasError('required')">请输入确认密码!</ng-container>
                  <ng-container *ngIf="control.hasError('confirm')">您输入的两个密码不一致!</ng-container>
                  <ng-container *ngIf="control.hasError('minlength')">密码最小为6位数</ng-container>
                </ng-template>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-label [nzSpan]="6" nzFor="name">真实姓名</nz-form-label>
              <nz-form-control [nzSm]="15" [nzXs]="24">
                <input nz-input type="text" id="name" formControlName="name"
                       placeholder="请输入用户姓名">
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-label [nzSpan]="6" nzFor="mobile">手机号码</nz-form-label>
              <nz-form-control [nzSm]="15" nzValidatingTip="验证中..." [nzXs]="24" [nzErrorTip]="mobileErrorTpl">
                <input nz-input type="text" id="mobile" formControlName="mobile" placeholder="请输入用户手机号">

                <ng-template #mobileErrorTpl let-control>
                  <ng-container *ngIf="control.hasError('mobile')">
                    请输入正确的手机号码!
                  </ng-container>
                </ng-template>

              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-label [nzSpan]="6" nzFor="sex">性别</nz-form-label>
              <nz-form-control [nzSm]="15" [nzXs]="24">
                <nz-radio-group id="sex" formControlName="sex">
                  <label nz-radio [nzValue]="1">男</label>
                  <label nz-radio [nzValue]="2">女</label>
                </nz-radio-group>
              </nz-form-control>
            </nz-form-item>
          </div>

          <div class="right">
            <nz-form-item>
              <nz-form-label [nzSpan]="6" nzRequired nzFor="roleId">角色分配</nz-form-label>
              <nz-form-control [nzSm]="15" [nzXs]="24">
                <nz-radio-group formControlName="roleId">
                  <label *ngFor="let date of roleList" nz-radio [nzValue]="date.id">{{date.name}}</label>
                </nz-radio-group>
              </nz-form-control>
            </nz-form-item>
          </div>

        </div>

      </form>
    </div>
    <div style="width: 400px;max-height: 550px;overflow:auto;">
      <div style="margin-bottom: 20px;">
        <h4>请选择允许查看的机构：</h4>
      </div>
      <div>
        <nz-tree
          #nzTreeComponent
          [nzData]="nodes"
          nzCheckable
          [nzCheckedKeys]="defaultCheckedKeys"
        ></nz-tree>
      </div>
    </div>
  </div>
</nz-modal>
